
function drawCheckerboard(){
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.strokeStyle = "rgba(0,0,0,1)";
    ctx.lineWidth = 1.2;  //线宽度
    ctx.beginPath();

    let x = 10, y = 10, length = 570, spacing = 30, count = 19;
    //横线
    for(let i = 0; i <= count; i ++){
        ctx.moveTo(x, y + (i * spacing));
        ctx.lineTo(x + length, y + (i * spacing));
    }
    //竖线
    for(let i = 0; i <= count; i ++){
        ctx.moveTo(x + (i * spacing), y);
        ctx.lineTo(x + (i * spacing), y + length);
    }

    ctx.stroke();
    drawCircle(ctx, 10, 10, 10)
    canvas.onmousedown = function(e){
        console.log('onmousedown', {x : e.layerX, y : e.layerY})
    }

    canvas.onmouseup = function(e){
        console.log('onmouseup', {x : e.layerX, y : e.layerY})
    }

    canvas.onmousemove = function(e){
        //console.log('onmouseup', {x : e.layerX, y : e.layerY})
    }
}

function clear(ctx) {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) {

    ctx.fillStyle = 'rgba(0, 0, 0, 1.0)';

    ctx.beginPath();

    ctx.arc(x, y, radius, 0, Math.PI*2, true);

    ctx.closePath();

    ctx.fill();

}